<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>image slider</title>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js" defer></script>
  </head>
  <body>
    <header class="header">
      <div class="logo">JetDev</div>
      <ul class="menu">
        <li class="menu-item">Home</li>
        <li class="menu-item">Blog</li>
        <li class="menu-item">Info</li>
      </ul>
      <div class="search">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
          <path
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
          />
        </svg>
      </div>
    </header>

    <div class="slider">
      <div class="list">
        <div class="list-item active">
          <img src="image/img1.png" />
          <div class="content">
            <p>Design</p>
            <h2>Slider 01</h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque omnis commodi labore
              quos ipsa quis nam similique suscipit architecto recusandae.
            </p>
          </div>
        </div>
        <div class="list-item">
          <img src="image/img2.jpg" />
          <div class="content">
            <p>Design</p>
            <h2>Slider 02</h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque omnis commodi labore
              quos ipsa quis nam similique suscipit architecto recusandae.
            </p>
          </div>
        </div>
        <div class="list-item">
          <img src="image/img3.jpg" />
          <div class="content">
            <p>Design</p>
            <h2>Slider 03</h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque omnis commodi labore
              quos ipsa quis nam similique suscipit architecto recusandae.
            </p>
          </div>
        </div>
        <div class="list-item">
          <img src="image/img4.jpg" />
          <div class="content">
            <p>Design</p>
            <h2>Slider 04</h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque omnis commodi labore
              quos ipsa quis nam similique suscipit architecto recusandae.
            </p>
          </div>
        </div>
        <div class="list-item">
          <img src="image/img5.jpg" />
          <div class="content">
            <p>Design</p>
            <h2>Slider 05</h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque omnis commodi labore
              quos ipsa quis nam similique suscipit architecto recusandae.
            </p>
          </div>
        </div>
      </div>

      <div class="arrows">
        <button id="prev"><</button>
        <button id="next">></button>
      </div>

      <div class="thumbnail">
        <div class="item active">
          <img src="image/img1.png" alt="" />
          <div class="content">Slider 01</div>
        </div>
        <div class="item">
          <img src="image/img2.jpg" alt="" />
          <div class="content">Slider 02</div>
        </div>
        <div class="item">
          <img src="image/img3.jpg" alt="" />
          <div class="content">Slider 03</div>
        </div>
        <div class="item">
          <img src="image/img4.jpg" alt="" />
          <div class="content">Slider 04</div>
        </div>
        <div class="item">
          <img src="image/img5.jpg" alt="" />
          <div class="content">Slider 05</div>
        </div>
      </div>
    </div>
  </body>
</html>
